<script setup lang="ts">
import router from "@/router/index.js";
import {onMounted, ref} from "vue";
import {ComponentSize, ElMessage, ElMessageBox} from "element-plus";
import {useDeleteByIdAPI, useGetAllByPageAPI, useGetCountsAPI} from "@/apis/warehouseLayout.js";


const warehouseLayoutList = ref<any[]>([]);

// 分页组件
const size = ref<ComponentSize>('small');
const background = ref(true)
const disabled = ref(false)
const current=ref(1);
const pageSize=ref(15);
const allCounts=ref(0);


const handleSizeChange=async (val:any)=>{
  const res=await useGetAllByPageAPI(current.value,val);
  warehouseLayoutList.value=res.data;
}
const handleCurrentChange=async (val:any)=>{
  const res=await useGetAllByPageAPI(val,pageSize.value);
  warehouseLayoutList.value=res.data;
}





onMounted( async () => {
      await useGetAllByPageAPI(current.value,pageSize.value).then((res:any)=>{
            warehouseLayoutList.value = res.data;
      });
      await useGetCountsAPI().then((res:any)=>{
            allCounts.value = res.data;
      })

})

// const getWarehouseLayoutInfo=(id:number)=>{
//       router.push({path:`/manage/warehouseLayoutDetail/${id}`});
// }
const updateWarehouseLayoutInfo=(id:number)=>{
      router.push({path:`/manage/warehouseLayoutUpdate/${id}`});
}

const  deleteWarehouseLayout=async (id:number)=>{
   await ElMessageBox.confirm('是否删除该货架信息?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
     await useDeleteByIdAPI(id)

     warehouseLayoutList.value = warehouseLayoutList.value.filter((warehouseLayout: any) => warehouseLayout.id!== id);

     ElMessage({
       type:'success',
       message: '删除成功!',
     })
    })
       .catch(() => {
         ElMessage({
           type: 'info',
           message: '已取消删除',
         })
       })
}

</script>

<template>

  <el-button type="primary" @click="router.push({path:'/manage/addWarehouseLayout'});">添加货架</el-button>
  <div>

    <div class="demo-pagination-block" style="float: right">
      <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[15, 30, 45]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allCounts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  <el-table
      :data="warehouseLayoutList"
      style="width: 100%"
      stripe
      border
      max-height="800"
      :default-sort="{prop:'updateTime',order:'descending',}"
  >
    <el-table-column prop="id" fixed label="ID" width="130" />

    <el-table-column prop="containerNumber" label="货架编号" width="130" />

    <el-table-column prop="containerName" label="货架名称" width="200" />

    <el-table-column prop="description" label="备注" width="300" />

    <el-table-column  label="操作" width="350" fixed="right">
      <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                   scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
      <template #default="scope">
<!--                <el-button size="small" type="warning" plain  @click="router.push({path:`/manage/warehouseLayoutDetail/${scope.row.id}`});">详情</el-button>-->
<!--        <el-button size="small" type="warning" plain  @click="getWarehouseLayoutInfo(scope.row.id)">详情</el-button>-->
        <el-button size="small" type="warning" plain  @click="updateWarehouseLayoutInfo(scope.row.id)">修改</el-button>
        <el-button size="small" type="warning" plain  @click="deleteWarehouseLayout(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <div class="demo-pagination-block" style="float: right">
      <el-pagination
          v-model:current-page="current"
          v-model:page-size="pageSize"
          :page-sizes="[15, 30, 45]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="allCounts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">




</style>